<template>
    <div class="nav">
        <ul>
            <li
                v-for="item in navList"
                :key="item.name"
                :class="{'active': item.name === currentName}">
                <router-link :to="item.path">
                    <i :class="`icon-${item.icon}`"></i>
                    {{ item.title }}
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import useStore from '@/store'
const { nav } = useStore()
const { navList, currentName } = storeToRefs(nav)
</script>

<style lang="less" scoped>
.nav {
    ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
        li {
            margin-right: 10px;
            height: 100%;
            > a {
                display: block;
                height: 100%;
                line-height: 22px;
                padding: 15px;
                box-sizing: border-box;
                color: var(--color-text-p);
            }
            &:hover {
                background-color: var(--color-white-s);
            }
        }
        .active {
            > a {
                color: var(--color-primary);
            }
            &:hover {
                background-color: var(--color-white);
            }
        }
    }
}
</style>
